<template>
  <el-popover
    popper-class="device_radio"
    placement="right"
    width="220"
    trigger="click"
    size="small"
  >
    <el-radio-group
      @change="handleCheckedSiteChange"
      v-model="checkedValues"
      border
      size="small"
    >
      <el-row>
        <el-col :span="24" :offset="0" v-for="item in options" :key="item">
          <el-radio
            border
            :label="item"
            @click.native.prevent="handleClick(item)"
          >
            {{ item || "其他" }}
          </el-radio>
        </el-col>
      </el-row>
    </el-radio-group>
    <el-button type="primary" slot="reference" size="mini" icon="el-icon-search"
      >站点筛选{{ value ? "(已筛选)" : "" }}</el-button
    >
  </el-popover>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      default: () => []
    },
    value: {
      type: String,
      default: ""
    }
  },
  computed: {
    checkedValues: {
      get() {
        return this.value;
      },
      set(val) {
        const v = val == this.value ? "" : val;
        this.$emit("input", v);
      }
    }
  },
  data() {
    return {};
  },
  methods: {
    handleClick(val) {
      const v = val == this.value ? "" : val;
      this.$emit("input", v);
      this.$emit("handleCheckedSiteChange", v);
    },
    handleCheckedSiteChange(val) {
      this.$emit("input", val);
      this.$emit("handleCheckedSiteChange", val);
    }
  }
};
</script>
<style lang="scss">
.device_radio {
  .el-radio {
    width: 100%;
    margin: 0 !important;
    margin-bottom: 6px !important;
  }
}
</style>
